<template>
<div class="plate_wrapper">
  <div class="title">{{source.seats}}</div>
  <div class="main_wrapper">
    <div class="item" v-if="source.sjCars.length > 0" :class="{customCls: source.sjCars.length > 22}">
      <div class="bigTitle">市级</div>
      <template v-if="source.sjCars.length > 22">
        <div class="itemMore">
          <div class="itemMore_item">
            <div class="item_items" :style="{background: item.bgColor}" v-for="(item,index) in source.sjCars.slice(0,22)" :key="index + 500">{{item.plateNum}}</div>
          </div>
          <div class="itemMore_item">
            <div class="item_items" :style="{background: item.bgColor}" v-for="(item,index) in source.sjCars.slice(22)" :key="index + 600">{{item.plateNum}}</div>
            <div class="item_items item_normal" v-for="(item,index) in 22 - source.sjCars.slice(22).length" :key="index + 700"></div>
          </div>
          <img width="0" @error="handleLoad" src="" alt="">
        </div>
      </template>
      <template v-else>
        <div class="item_items" :style="{background: item.bgColor}" v-for="(item,index) in source.sjCars" :key="index + 100">{{item.plateNum}}</div>
        <div class="item_items item_normal" v-for="(item,index) in 22 - source.sjCars.length" :key="index + 200"></div>
      </template>
    </div>

    <div class="item" v-if="source.xjCars.length > 0" :class="{customCls: source.xjCars.length > 22}">
      <div class="bigTitle noBorderRight" >县级</div>
      <template v-if="source.xjCars.length > 22">
        <div class="itemMore">
          <div class="itemMore_item">
            <div class="item_items " :style="{background: item.bgColor}" v-for="(item,index) in source.xjCars.slice(0,22)" :key="index + 500">{{item.plateNum}}</div>
          </div>
          <div class="itemMore_item">
            <div class="item_items noBorderRight" :style="{background: item.bgColor}" v-for="(item,index) in source.xjCars.slice(22)" :key="index + 600">{{item.plateNum}}</div>
            <div class="item_items item_normal noBorderRight" v-for="(item,index) in 22 - source.xjCars.slice(22).length" :key="index + 700"></div>
          </div>
          <img width="0" @error="handleLoad" src="" alt="">
        </div>
      </template>
      <template v-else>
        <div class="item_items noBorderRight" :style="{background: item.bgColor}" v-for="(item,index) in source.xjCars" :key="index + 300">{{item.plateNum}}</div>
        <div class="item_items item_normal noBorderRight" v-for="(item,index) in 22 - source.xjCars.length" :key="index + 400"></div>
      </template>
    </div>
  </div>
</div>
</template>

<script>
import {debounce} from 'lodash'
export default {
  name: "plateItem",
  props:{
    source:{
      type:Object,
      default:() => {}
    }
  },
  methods:{
    handleLoad:debounce(function () {
      this.$emit('change')
    },1000)
  }
}
</script>

<style scoped>
.plate_wrapper{
  display: inline-block;
  border: 1px solid #5e8fe5;
  margin-left: -1px;
}
.title {
  color: white;
  font-size: 14px;
  height: 20px;
  line-height: 20px;
  background: #393B6A;
  text-align: center;
}
.main_wrapper {
  display: inline-flex;
  text-align: center;
}
.item{
  display: inline-block;
  width: 70px;
  padding: 0 !important;
}
.customCls{
  width: 140px !important;
}
.bigTitle {
  background: #ecebeb;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  border-right: 1px solid #5e8fe5;
  border-bottom: 1px solid #5e8fe5;
}

.item_items{
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  border-right: 1px solid #5e8fe5;
  border-bottom: 1px solid #5e8fe5;
}
.item_items:last-child {
  border-bottom: none;
}

.itemMore{
  display: flex;
}
.itemMore_item {
  flex: 1;
}

.item_normal{
  height: 20px;
}
.noBorderRight {
  border-right: none;
}
</style>
